<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
            /**
             * 将DOM对象转换为jQuery对象
             */
            var objDom = document.getElementById('d1') // DOM对象
            // console.log(objDom.innerText);
            // objDom.style.color = 'red'

            var objJquery = $(objDom) // jQuery对象
            console.log(objJquery.text());
            objJquery.css('background','pink')

            /**
             * 将jQuery对象转换为DOM对象
             */
            var pJquery = $('#p1') // jQuery对象
            // pJquery.css('color','blue')
            // console.log(pJquery);

            // var pDom = pJquery.get(0)
            var pDom = pJquery[0]
            // console.log(pDom);
            pDom.style.color = 'green'

        })
    </script>
</head>
<body>
    <div id="d1">hello</div>
    <p id="p1">world</p>
</body>
</html>